﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="js/v5.1.3-dist/ol.css" rel="stylesheet" type="text/css" />
    <script src="js/v5.1.3-dist/ol.js" type="text/javascript"></script>
    <link href="css/example.css" rel="stylesheet" />
    <script src="js/InitMap.js"></script>
    <script src="js/jquery.js"></script>
    <script src="js/extend/FileSaver/FileSaver.min.js"></script>
    <script src="js/extend/jspdf/jspdf.min.js"></script>
    <script type="text/javascript">
        window.onload = function () {
            var map = initMap();

            var format = new ol.format.WKT();
            var feature = format.readFeature(
                'POLYGON((10.689697265625 -25.0927734375, 34.595947265625 ' +
                '-20.1708984375, 38.814697265625 -35.6396484375, 13.502197265625 ' +
                '-39.1552734375, 10.689697265625 -25.0927734375))');

            var vector = new ol.layer.Vector({
                source: new ol.source.Vector({
                    features: [feature]
                })
            });

            map.addLayer(vector);

            var dims = {
                a0: [1189, 841],
                a1: [841, 594],
                a2: [594, 420],
                a3: [420, 297],
                a4: [297, 210],
                a5: [210, 148]
            };


            var exportButton = document.getElementById('export-pdf');

            exportButton.addEventListener('click', function () {
                loading = 0;
                loaded = 0;
                exportButton.disabled = true;
                document.body.style.cursor = 'progress';

                var format = document.getElementById('format').value;
                var resolution = document.getElementById('resolution').value;
                var dim = dims[format];
                var width = Math.round(dim[0] * resolution / 25.4);
                var height = Math.round(dim[1] * resolution / 25.4);
                var size = /** @type {ol.Size} */ (map.getSize());
                var extent = map.getView().calculateExtent(size);

                var source = getLayerById("Tianditu_cva").getSource();

                var tileLoadStart = function () {
                    ++loading;
                };

                var tileLoadEnd = function (event) {
                    ++loaded;
                    console.log(loading, loaded);
                    if (loading === loaded) {
                        //var canvas = this;
                        window.setTimeout(function () {

                            var data = canvas.toDataURL('image/png');
                            var pdf = new jsPDF('landscape', undefined, format);
                            pdf.addImage(data, 'JPEG', 0, 0, dim[0], dim[1]);
                            pdf.save('map.pdf');
                            source.un('tileloadstart', tileLoadStart);
                            source.un('tileloadend', tileLoadEnd, canvas);
                            source.un('tileloaderror', tileLoadEnd, canvas);
                            map.setSize(size);
                            map.getView().fit(extent, size);
                            map.renderSync();
                            exportButton.disabled = false;
                            document.body.style.cursor = 'auto';
                        }, 100);
                    }
                };
                var canvas;
                map.once('postcompose', function (event) {
                    canvas = event.context.canvas;
                    source.on('tileloadstart', tileLoadStart);
                    source.on('tileloadend', tileLoadEnd);
                    source.on('tileloaderror', tileLoadEnd);
                });

                map.setSize([width, height]);
                map.getView().fit(extent, /** @type {ol.Size} */(map.getSize()));
                map.renderSync();

            });

            /**
             * 根据id获取图层
             * @param {any} layerId
             */
            function getLayerById(layerId) {
                if (!layerId) {
                    return null;
                }
                let layers = map.getLayers();
                let lyr;
                $.each(layers.array_, function (index, layer) {
                    if (layer.id == layerId) {
                        lyr = layer;
                    }
                });
                return lyr;
            }
        }
    </script>
</head>
<body>
    <div class="ToolLib">
        <label><strong>图片大小:</strong> </label>
        <select id="format" style="height: 25px;">
            <option value="a0">A0 (慢)</option>
            <option value="a1">A1</option>
            <option value="a2">A2</option>
            <option value="a3">A3</option>
            <option value="a4" selected>A4</option>
            <option value="a5">A5 (快)</option>
        </select>
        <label><strong>分辨率</strong></label>
        <select id="resolution">
            <option value="72">72 dpi (快)</option>
            <option value="150">150 dpi</option>
            <option value="300">300 dpi (慢)</option>
        </select>
        <input type="button" class="ButtonLib" id="export-pdf" value="下载 PDF" />
    </div>

    <div id="map">
    </div>
</body>
</html>
